<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<style type="text/css">
			#img_s{
				width:300px;
			}
			#img_l{
				position: absolute;
				left: -200px;
				top: -400px;
			}
			#pic_l{
				width: 300px;
				height: 200px;
				border: 1px solid black;
				overflow: hidden;
				position: relative;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="pic_s">
			<img id="img_s" src="http://144.168.62.173/images/Meinv120.jpg"/>
		</div>
		<div id="pic_l">
			<img id="img_l" src="http://144.168.62.173/images/Meinv120.jpg" />
		</div>
		
		<script type="text/javascript">
			//获取小图对象
			var ob_img_s=document.getElementById("img_s");
			//获取大图对象
			var ob_img_l=document.getElementById("img_l");
			//获取小窗口对象
			var ob_pic_l=document.getElementById("pic_l");
			ob_img_s.onmouseover=function(ent){
				var event = ent || window.event;
				var x=event.clientX;
				var y = event.clientY;
				var img_s_width=ob_img_s.width;
				var img_s_height=ob_img_s.height;
				var img_l_width=ob_img_l.width;
				var img_l_height=ob_img_l.height;
				//console.log(ob_img_s.width,ob_img_s.height);
				//console.log(ob_img_l.width,ob_img_l.height);
				//console.log(x,y);
				ob_pic_l.style.display="block";
				window.document.onmousemove=function(ent_move){
					var event_move=ent_move||window.event;
					//计算大图X,Y偏移量
					var skewing_x=Math.min((img_l_width-img_s_width),((event_move.clientX/img_s_width)*img_l_width-200));
					var skewing_y=Math.min((img_l_height-img_s_height),((event_move.clientY/img_s_height)*img_l_height-150));
					console.log(skewing_x,skewing_y);
					ob_img_l.style.left="-"+skewing_x+"px";
					ob_img_l.style.top="-"+skewing_y+"px";
					//console.log(event_move.clientX,event_move.clientY);
				}
			}
			ob_img_s.onmouseout=function(){
				ob_pic_l.style.display="none";
			}
		</script>
	</body>
</html>
